<template>
    <div class="expand">
        <div class="expand-btn" @click="expandHandler">
            <svg-icon icon-class="list" />
            <span class="expand-title">图例</span>
            <svg-icon
                icon-class="down"
                class="expand-btn-icon"
                :style="`transform: ${
                    !expand ? 'rotate(180deg)' : 'rotate(0deg)'
                }`"
            />
        </div>
        <div v-if="expand" class="expand-content">
            <slot />
        </div>
    </div>
</template>

<script>
import { optionsMerger, propsBinder, findRealParent } from "../../utils";
import ControlMixin from "../../mixins/Control.js";
import Options from "../../mixins/Options.js";
import { Control, DomEvent } from "leaflet";

/**
 * Add any custom component as a leaflet control
 */
export default {
    name: "LControlExpand",
    mixins: [ControlMixin, Options],
    props: {},
    data() {
        return {
            expand: true,
        };
    },
    mounted() {
        const LControl = Control.extend({
            element: undefined,
            onAdd() {
                return this.element;
            },
            setElement(el) {
                this.element = el;
            },
        });
        const options = optionsMerger(this.controlOptions, this);
        this.mapObject = new LControl(options);
        propsBinder(this, this.mapObject, this.$options.props);
        this.parentContainer = findRealParent(this.$parent);
        this.mapObject.setElement(this.$el);
        if (this.disableClickPropagation) {
            DomEvent.disableClickPropagation(this.$el);
        }
        if (this.disableScrollPropagation) {
            DomEvent.disableScrollPropagation(this.$el);
        }
        this.mapObject.addTo(this.parentContainer.mapObject);
        this.$nextTick(() => {
            /**
             * Triggers when the component is ready
             * @type {object}
             * @property {object} mapObject - reference to leaflet map object
             */
            this.$emit("ready", this.mapObject);
        });
    },
    methods: {
        expandHandler() {
            this.expand = !this.expand;
        },
    },
};
</script>
<style lang="scss" scoped>
.expand {
    /* 右上 */

    /* Auto layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;

    background: rgba(255, 255, 255, 0.8);
    /* 阴影/一级*/
    box-shadow: 0px 0px 1px rgba(31, 38, 76, 0.32),
        0px 2px 5px rgba(31, 38, 76, 0.04),
        0px 2px 3px -2px rgba(31, 38, 76, 0.1);
    border-radius: 4px;
    // transform: rotate(90deg);
    &-btn {
        /* 添加 */
        margin: 1px 0;
        font-size: 16px;
        // pointer-events: none;
        cursor: pointer;

        /* Auto layout */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px;
        gap: 13px;

        width: 108px;
        height: 20px;

        &-icon {
            font-size: 14px;
            transition: transform 2.5ms;
        }
    }
    &-separator {
        /* 矩形 */

        width: 20px;
        // height: 2px;
        border-bottom: 1px solid #b9b4bd;
        margin: 1px 0;
        // background: #b9b4bd;
        opacity: 0.3;
    }
    &-title {
        /* 安全数据分类列表 */

        flex: 1;
        height: 20px;

        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        /* identical to box height, or 125% */

        /* N1 */
        color: #1f264d;
    }
    &-content {
        transition: all 0.5s ease;
        // animation: expandAnimation 2s linear; /* 应用动画 */
    }

    // @keyframes expandAnimation {
    //     from {
    //         transform: rotate(360deg);
    //     }
    //     to {
    //         transform: rotate(360deg);
    //     }
    // }
}
</style>
